<script lang="ts">
import Vue, { VNode } from 'vue'
import { Component, Prop } from 'vue-property-decorator'
import { CreateElement } from 'vue/types/vue'

@Component({ name: 'com-textswitch' })
export default class ComTextSwitch extends Vue {
  @Prop({ required: true })
  configs: Array<{ code: string, text: string }>

  @Prop()
  value: string

  onClickConfig (code) {
    return (e) => {
      this.$emit('input', code)
    }
  }

  render (h: CreateElement) {
    const nodes: VNode[] = []
    for (let i = 0; i < this.configs.length; i++) {
      const { code, text } = this.configs[i]
      nodes.push(h('span', {
        staticClass: 'switch-text',
        class: {
          'current': this.value === code
        },
        on: {
          'click': this.onClickConfig(code)
        }
      }, text))
      if (i !== this.configs.length - 1) {
        nodes.push(h('span', ' | '))
      }
    }
    return h('span', {
      staticClass: 'com-textswitch'
    }, nodes)
  }
}
</script>
<style lang="less">
@import url('../../styles/variable.less');

.com-textswitch {
  .switch-text {
    cursor: pointer;
  }

  .switch-text.current {
    font-weight: bold;
    color: @color-primary;
  }
}
</style>
